import React from 'react';
import Product from  'service/product-service.jsx';
import Tool from  'tool/tool.jsx';
const _product = new Product();
const _req = new Tool();



//商品品类加载
class CategorySearch extends React.Component{
 constructor(props){
   super(props);
   this.state={
     firstcategoryId: 0,
     firstcategoryList: [],
     secondcategoryId: 0,
     secondcategoryList: []
   }
   this.loadFirstCategory = this.loadFirstCategory.bind(this);
   this.onPropsCategoryChange = this.onPropsCategoryChange.bind(this);
   this.loadSecondCategory = this.loadSecondCategory.bind(this);
 }
 componentDidMount(){
   this.loadFirstCategory();
 }
 //父组件的render函数被调用时就会触发的生命周期函数，
 //在这里做商品编辑时，商品详情回填的处理
 componentWillReceiveProps(nextProps){
   //先判断组件这次渲染的值nextProps和上次渲染的值this.props做对比，发生改变才做处理
   let categoryIdChange = this.props.categoryId !== nextProps.categoryId;
   let parentcategoryIdChange = this.props.parentCategoryId!== nextProps.parentCategoryId ;
   //数据没发生改变时不做处理
   if(!categoryIdChange && !parentcategoryIdChange){
     return;
   }
   //只有一级品类
   if(nextProps.parentCategoryId === 0){
     this.setState({
       firstcategoryId: nextProps.categoryId,
       secondcategoryId: 0
     })
   }else{
    this.setState({
      firstcategoryId: nextProps.parentCategoryId,
      secondcategoryId: nextProps.categoryId
    },()=>{
       this.loadSecondCategory();
    })
   }
 }
  //加载一级品类
 loadFirstCategory(){
   //传入参数0，代表根节点，返回所有一级品类
  _product.getCategoryList().then(res=>{
   this.setState({
      firstcategoryList : res
    })
  },errorMsg=>{
    _req.errorTips(errMsg);
  });
 }
 //加载二级品类
 loadSecondCategory(){
     _product.getCategoryList(this.state.firstcategoryId).then(res=>{
      this.setState({
        secondcategoryList : res
      })
    },errorMsg=>{
      _req.errorTips(errorMsg);
    });
 }
 //选择一级品类
 firstcategoryChange(e){
   if(this.props.ReadOnly){
     return;
   }
   let newValue = e.target.value;
   //一级品类发生改变时，先将上一次的二级品类清空
   //获取二级品类一定要在state值重置以后
   this.setState({
     firstcategoryId: newValue,
     secondcategoryId: 0,
     secondcategoryList: []
   },()=>{
     //加载二级品类
    this.loadSecondCategory()
    //向父组件传递选中结果
    this.onPropsCategoryChange();
   })
 }
 //选择二级品类
 secondcategoryChange(e){
      if(this.props.ReadOnly){
        return;
      }
      let newValue = e.target.value;
      //一级品类发生改变时，先将上一次的二级品类清空
      //获取二级品类一定要在state值重置以后
      this.setState({
        secondcategoryId: newValue,
      },()=>{
      //向父组件传递选中结果
      this.onPropsCategoryChange();
      })
 }
 //向父组件传递品类选择结果
 onPropsCategoryChange(){
    //判断父组件是否传递给子组件该方法
    let categoryChange = typeof this.props.onFatherCategoryChange === 'function';
    //如果有二级品类
    if(this.state.secondcategoryId !== 0){
      categoryChange && this.props.onFatherCategoryChange(this.state.secondcategoryId,this.state.firstcategoryId);
    }
      //如果有一级品类
    else{
      categoryChange && this.props.onFatherCategoryChange(this.state.firstcategoryId,0);
    }
 }
  render(){
    return(
          <div className="form-group">
              <label  className="col-md-2 control-label">所属分类</label>
                  <div className="col-md-5 cate-wapper">
                     <select  className="col-md-2 form-control"
                              readOnly={this.props.ReadOnly}
                              value={this.state.firstcategoryId}
                              onChange={e=>{this.firstcategoryChange(e)}}>
                       <option value="">请选择一级分类</option>
                       {
                         this.state.firstcategoryList.map(
                           (category,index)=>{
                            return (
                              <option key={index} value={category.id}>{category.name}</option>
                            )
                         })
                       }
                     </select>
                     { this.state.secondcategoryList.length !== 0 ?
                      <select  className=" col-md-2 form-control"
                               readOnly={this.props.ReadOnly}
                               value={this.state.secondcategoryId}
                               onChange={e=>{this.secondcategoryChange(e)}}>
                        <option value="">请选择二级分类</option>
                        {
                         this.state.secondcategoryList.map(
                           (category,index)=>{
                            return (
                              <option key={index} value={category.id}>{category.name}</option>
                            )
                         })
                       }
                     </select>
                     : null
                     }               
                  </div>   
          </div>
    );
  }
}
export default  CategorySearch;
